<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=map3d-buildings&gl=1
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>

  <!-- <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script> -->
  <!-- <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script> -->
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/dataTool.min.js"></script>
  -->

  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var ROOT_PATH = '';
    var option;

    $.getJSON(
      ROOT_PATH + 'json/xian_3701_org.geojson',
      function (areasGEOJSON) {
        echarts.registerMap('areas', areasGEOJSON);
        var regions = areasGEOJSON.features.map(function (feature) {
          return {
            name: feature.properties.name,
            value: Math.random(),
            height: 10
          };
        });
        myChart.setOption({
emphasis: {
            // disabled: true, //是否可以被选中
            label: {
                formatter: function (params) { // 鼠标经过的回调函数  
                    console.log('hover', params)
                    return params.name
                }
              }
            },
            itemStyle :{
color:'red'
            },
            label:{
              show:true
            },
          visualMap: {
            show: false,
            min: 0.4,
            max: 1,
            inRange: {
              color: [
                '#313695',
                '#4575b4',
                '#74add1',
                '#abd9e9',
                '#e0f3f8',
                '#ffffbf',
                '#fee090',
                '#fdae61',
                '#f46d43',
                '#d73027',
                '#a50026'
              ]
            }
          },
          series: [
            {
              type: 'map3D',
              map: 'areas',
              shading: 'realistic',
              environment: '#000',
              realisticMaterial: {
                roughness: 0.6,
                textureTiling: 20
              },
              postEffect: {
                enable: false,
                // SSAO: {
                //   enable: true,
                //   intensity: 1.3,
                //   radius: 5
                // },
                // screenSpaceReflection: {
                //   enable: false
                // },
                // depthOfField: {
                //   enable: true,
                //   blurRadius: 4,
                //   focalDistance: 30
                // }
              },
              light: {
                main: {
                  intensity: 3,
                  alpha: 40,
                  shadow: true,
                  shadowQuality: 'high'
                },
                ambient: {
                  intensity: 0
                },
                ambientCubemap: {
                  texture: ROOT_PATH + 'pisa.hdr',
                  exposure: 1,
                  diffuseIntensity: 0.5,
                  specularIntensity: 1
                }
              },
              groundPlane: {
                show: false,
                color: '#333'
              },
              viewControl: {
                minBeta: -360,
                maxBeta: 360,
                alpha: 60,
                // center: [50, 0, -10],
                distance: 210,
                minDistance: 5,
                panMouseButton: 'left',
                rotateMouseButton: 'middle',
                zoomSensitivity: 0.5
              },
              itemStyle: {
                areaColor: '#666'
                // borderColor: '#222',
                // borderWidth: 1
              },
              label: {
                color: 'white'
              },
              silent: true,
              instancing: true,
              boxWidth: 200,
              boxHeight: 1,
              data: regions
            }
          ]
        });
        myChart.on('click', function (params) {
          // 控制台打印数据的名称
          console.log(params.name);
        });
      }
    );

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);

  </script>
</body>

</html>